<template>
  <div class="compile-title">
    <el-form label-width="80px" class="form-container">
      <div class="form-item">
        <label for="compile_title">文章标题：</label>
        <input 
          type="text" 
          placeholder="请输入文章标题" 
          v-model="compile_title" 
          class="input-field"
        />
      </div>

      <el-form-item prop="tags">
        <label for="compile_title">文章标签：</label>
        <el-select
          v-model="selectedTags"
          multiple
          placeholder="请选择文章标签"
          class="select-tags"
        >
          <el-option
            v-for="tag in tags"
            :key="tag.id"
            :label="tag.name"
            :value="tag.id" 
          />
        </el-select>
      </el-form-item>

      <div class="form-item">
        <span>文章内容：</span>
        <textarea 
          v-model="text" 
          placeholder="请输入文章内容" 
          class="textarea-field"
        />
      </div>

      <div class="form-item">
        <button type="button" @click="submitForm" class="submit-btn">提交</button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useTagCenter } from '@/stores/tagCenter';
import { useCreateArticle } from '@/stores/createArticle';
import { useEntryStore } from '@/stores/entry';
import { ListFormat } from 'typescript';

let compile_title = ref('');
let tags = ref([]);
let selectedTags = ref([]);  
let text = ref('');
const tagCenter = useTagCenter();
const createArticle = useCreateArticle();
const entryStore = useEntryStore();

async function GetTag() {
  const response = await tagCenter.getTags();
  tags.value = response.data.data || []; 
}


async function createArt() {
  const response = await createArticle.articleCreate(entryStore.token, {
    Title: compile_title.value,
    Content: text.value,
    UserId: entryStore.id,
    Tags: selectedTags.value 
  });
  
}

onMounted(() => {
  GetTag();
});


const submitForm = () => {
  createArt();
  compile_title.value=''
  text.value=''
  selectedTags.value=''
  alert("上传成功")
};
</script>

<style scoped>
element.style{
  margin: 0 !important;;
}
.compile-title {
  width: 100%;
  height: 80vh;
  margin: 0 auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
}

.form-container {
  display: flex;
  flex-direction: column;
}

.form-item {
  margin-bottom: 24px;
}

label {
  font-size: 16px;
  color: #333;
  margin-left: 30px;
}

.input-field,
.textarea-field,
.select-tags {
  width: 100%;
  margin-left:80px;
  padding: 12px;
  border: 1px solid #ddd;
  font-size: 14px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  transition: border-color 0.3s;
}
.select-tags{
  margin:0;
}
.input-field:focus,
.textarea-field:focus,
.select-tags:focus {
  border-color: #409EFF;
  outline: none;
}

.textarea-field {
  height: 180px;
  resize: vertical;
}

.submit-btn {
  margin-left:40px;
  width: 100%;
  padding: 12px;
  background-color: #409EFF;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #66b1ff;
}

.submit-btn:focus {
  outline: none;
}

.submit-btn:active {
  background-color: #338cc1;
}
</style>
